class DragSelect extends Drag {
  constructor(...arg) {
    super(...arg);
    this.select = null;
    this.startOffset = {};
    this.on("dragstart", (e) => {
      this.dragStart(e);
    });
    this.on("dragmove", (e, dis, now) => {
      this.dragMove(e, dis, now);
    });
    this.on("dragend", (e) => {
      this.dragEnd(e);
    });
  }
  dragStart(e) {
    this.startOffset = {
      x: e.clientX,
      y: e.clientY,
    };
    this.select = document.createElement("div");
    this.select.className = "selectBox";
    document.body.appendChild(this.select);
    e.stopPropagation(); // 处理冒泡
  }
  dragMove(e, dis, now) {
    // 框的宽度：两个坐标点的横向差值
    this.select.style.width = Math.abs(dis.x) + "px";
    // 框的高度：两个坐标点的纵向差值
    this.select.style.height = Math.abs(dis.y) + "px";
    // 框的left：两个坐标点靠近左侧的横坐标(较小的值)
    this.select.style.left = Math.min(now.x, this.startMouse.x) + "px";
    // 框的top：两个坐标点靠近上方的纵坐标(较小的值)
    this.select.style.top = Math.min(now.y, this.startMouse.y) + "px";
  }
  dragEnd(e) {
    this.select.remove();
  }
}